<template>
  <div
    class="center"
    style=""
    ref="homePage"
  >
    <div class="top1">
      <img
        :src="user.cover"
        class="userimg"
        alt=""
      >
      <div class="username">
        <div class="name">{{user.nick_name}}</div>
        <!-- <div class="qianming">微信号：{{user.wx}}</div> -->
      </div>
    </div>
    <div class="zhongjiansss">
      <div class="zhongjian-t">
        分销推广
      </div>
      <div class="zhongjian-c">
        &nbsp; &nbsp;&nbsp; &nbsp;在全民免费教育兴起的背景下，越来越多的老师渴望实现知识的变现，与此同时，越来越多的学员也期望能够真正意义上实现知识的免费获取。基于这样的背景下，知运特推出分销推广业务板块，力求帮助平台所有用户实现“利益”的最大化。
      </div>
      <div
        class="zhongjian-b"
        @click="popup"
      >
        了解更多
        <img
          class="more-img"
          src="https://o6wndwjxn.qnssl.com/%E4%BA%86%E8%A7%A3%E6%9B%B4%E5%A4%9A-%E7%AE%AD%E5%A4%B4@2x.png"
        >
      </div>
    </div>
    <div class="nr">
      <div class="lists">
        <div
          class="listcont"
          :class="`list-${index}`"
          v-for="(item,index) in lieArr"
          :key='index'
          @click="gogogos(item.path)"
        >
          <div
            class="column-img"
            v-if="item.img"
          ><img
              :src="item.img"
              alt=""
            /></div>
          <div class="go-name-a">{{item.name}}</div>
          <div class="go-title-a">{{item.text}}</div>
        </div>
        <div>
        </div>
      </div>
    </div>
    <PurchaseInstructions ref="Instructions">
      <div slot="title">
        分销推广
      </div>
      <div
        slot="content"
        class="ppp-sss"
      >
        <p style="text-align: center;margin:5px 0px; font-size:18px">分销推广</p>
        <p class="duanluo">
          &nbsp; &nbsp; &nbsp; &nbsp;在全民免费教育兴起的背景下，越来越多的老师渴望实现知识的变现，与此同时，越来越多的学员也期望能够真正意义上实现知识的免费获取。
        </p>
        <p class="duanluo">
          &nbsp; &nbsp; &nbsp; &nbsp;基于这样的背景下，知运特推出分销推广业务板块，力求帮助平台所有用户实现“利益”的最大化。
        </p>
        <p style="text-align: center; margin:5px 0px; font-size:18px">分销</p>
        <p class="duanluo"> &nbsp; &nbsp; &nbsp; &nbsp;分销实际上是指有些教师为了充分宣传课程，在课程后台设置了分销比例（0-60%），用户可以在课程内文页，通过推广赚的按钮， 将课程分享给其他用户，当其他用户通过其分享的\链接产生消费后，分销者将获得收益， 从而补充其教育资金， 并且可以在我的钱包的收益明细中查看流水。
          分销人收益=通过其分享产生消费的学员实付金额x教师设定的分销比例。</p>
        <p style="text-align: center;margin:5px 0px; font-size:18px">推广</p>
        <p
          style="margin-bottom:5px"
          class="duanluo"
        > &nbsp; &nbsp; &nbsp; &nbsp;推广版块是针对平台全用户的，当您成知运平台用户后，点击右下角“个人中心”，在推广中心，即可生成印有您专属二维码的个人推广海报，当您将海报分享给您的朋友后，他们通过扫描您的二维码成为平台教师或平台学员，并
          教师推广人收益=教师净收入x5%（由平台补
          贴）
          学员推广人收益=学员实际消费金额x5%（由
          平台补贴）
          但当学员的推广介绍人是教师时，分销者与推广者都不再获取收益，此时，教师收入=学员实际消费金额。</p>
      </div>
    </PurchaseInstructions>
    <confirm
      v-model="shows"
      :show-cancel-button="false"
      @on-confirm="onConfirm"
    >
      <div>
        <img
          src="https://o6wndwjxn.qnssl.com/WechatIMG7.jpeg"
          style="width:165px;"
        >
      </div>
      <div style="margin-top:8px;">推广秘书</div>
      <p style="font-family: PingFangSC-Regular;
font-size: 12px;
margin-top:8px;
color: #999999;">扫描微信二维码添加知运客服了解更多</p>
      <p style="font-family: PingFangSC-Regular;
font-size: 12px;
margin-top:8px;
color: #999999;">（长按保存到相册）</p>
    </confirm>
  </div>
</template>

<script>
import bottomtab from '@/components/public/tab'
import PurchaseInstructions from '@/components/public/PurchaseInstructions'

import {
  mapState
} from 'vuex'
import {
  user_list
} from '@/api/center'
import {
  Confirm,
  Cell,
  CellBox,
  CellFormPreview,
  Group,
  Badge
} from 'vux'

export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    Confirm,
    PurchaseInstructions,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge,
    bottomtab
  },
  data () {
    return {
      shows: false,
      loading: true,
      clientHeight: '',
      user: {},
      appear: '',
      lieArr: [{
        name: '推广海报',
        text: '分享海报',
        path: 'posters',
        img: 'http://o6wndwjxn.qnssl.com/a081320190409102633835.png'
      },
      {
        path: 'secretary'
      },
      {
        name: '合伙人',
        text: '学员老师',
        path: 'partner',
        img: 'http://o6wndwjxn.qnssl.com/efd6c201904091026261177.png'
      },
      {
        path: 'secretary'
      },
      {
        name: '推广秘书',
        text: '推广达人',
        path: 'secretary',
        img: 'http://o6wndwjxn.qnssl.com/04984201904091026399426.png'
      }]
    }
  },

  created () {
    this.jiazai()
  },
  mounted () {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  },
  watch: {
    clientHeight: function () {
      this.changeFixed(this.clientHeight)
    }
  },
  methods: {
    gogogos (path) {
      if (path === 'secretary') {
        this.shows = true
      } else {
        this.$router.push({
          path: `/${path}`
        })
      }
    },
    onConfirm (msg) {
      console.log('on confirm')
      if (msg) {
        alert(msg)
      }
    },
    changeFixed (clientHeight) { // 动态修改样式
      // console.log(clientHeight)
      this.$refs.homePage.style.height = clientHeight + 'px'
    },
    popup (e) {
      // console.log(e)
      this.$refs.Instructions.ava = true
      // this.appear = e
    },
    out (e) {
      // console.log(e)
      this.appear = ''
    },
    jiazai () {
      let prams = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      user_list(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let {
          code,
          data
        } = res.data
        // console.log('个人中心', data)
        if (code === 200) {
          this.user = data
        }
      })
    }
  }
}
</script>

<style scoped>
.more-img {
  width: 6px;
  height: 11px;
  position: absolute;
  right: 0px;
  top: calc(100vw * 4 / 750);
}
.duanluo {
  color: #999999;
}
.go-name-a {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #333333;
  text-align: center;
}
.go-title-a {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 24 / 750);
  color: #999999;
  text-align: center;
}
.kong {
  height: 50px;
}

.name {
  display: block;
  font-size: 15px;
  position: relative;
  font-size: 32px;
  color: #333333;
}

.center {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.top1 {
  width: 100%;
  height: 132px;
}
.userimg {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #000000;
  margin-left: 29px;
  margin-top: 27px;
  vertical-align: middle;
}

.username {
  vertical-align: middle;
  display: inline-block;
  height: 50px;
  margin-left: 14px;
  margin-top: 27px;
}

.username .name {
  font-family: PingFang-SC-Bold;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333;
  margin-bottom: 12px;
}

.username .qianming {
  font-family: PingFang-SC-Bold;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #666666;
}

.zhongjiansss {
  width: 90%;
  background-color: #ffffff;
  border-radius: 5px;
  margin: -26px auto 15px;
  padding: calc(100vw * 32 / 750);
  box-shadow: 0 0 12px 0 rgba(153, 153, 153, 0.2);
}

.zhongjian-t {
  font-weight: bold;
  color: #000000;
  padding-bottom: calc(100vw * 32 / 750);
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: calc(100vw * 34 / 750);
  color: #333333;
}

.zhongjian-c {
  font-size: calc(100vw * 28 / 750);
  font-family: PingFangSC-Regular;
  color: #999999;
  overflow: hidden;
  line-height: calc(100vw * 40 / 750);
  padding-bottom: calc(100vw * 32 / 750);
  border-bottom: solid 1px #eeeeee;
}

.zhongjian-b {
  position: relative;
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #da4131;
  margin-top: calc(100vw * 28 / 750);
  width: 100%;
  background-image: url("http://o6wndwjxn.qnssl.com/6b25c20190306143249722.svg");
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: calc(100vw * 10 / 750) 22px;
}

.tanbox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  overflow-y: scroll;
}

.tan {
  width: 62%;
  padding: 12px 10px;
  border-radius: 6px;
  margin: 8% auto;
  background: #ffffff;
}

.tan-tit {
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.tan-txt {
  line-height: 20px;
  font-size: 10px;
}

.nr {
  width: 94%;
  background-color: #ffffff;
  border-radius: 5px;
  margin: 0 auto;
}

.nr_tit {
  height: 38px;
  border-bottom: 1px solid #f0f0f0;
  font-family: PingFang-SC-Medium;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  text-align: center;
  letter-spacing: 0px;
  color: #000000;
}

.lists {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
}
.list-1,
.list-3 {
  flex: 0 0 1px;
  width: 1px;
  height: calc(100vw * 168 / 750);
  background-color: #e2e2e2;
}
.listcont {
  margin: 0 auto;
  text-align: center;
}

.column {
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: #666;
}

.column-img {
  width: calc(100vw * 72 / 750);
  height: calc(100vw * 72 / 750);
  display: inline-block;
  text-align: center;
  overflow: hidden;
  margin-bottom: calc(100vw * 22 / 750);
}

.column-img img {
  width: calc(100vw * 72 / 750);
  height: calc(100vw * 72 / 750);
}
</style>
